
export default function leftTitle(){
    var canvas_leftTitle = document.getElementById('heter-leftTitle');
    var leftTitle_w = canvas_leftTitle.clientWidth;
    var leftTitle_h = canvas_leftTitle.clientHeight;
    var ctx_leftTitle = canvas_leftTitle.getContext('2d');
    canvas_leftTitle.width = leftTitle_w;
    canvas_leftTitle.height = leftTitle_h;
    ctx_leftTitle.width = leftTitle_w;
    ctx_leftTitle.height = leftTitle_h;
    ctx_leftTitle.fillStyle = 'rgba(0,0,0,0)';
    ctx_leftTitle.fillRect(0, 0, leftTitle_w, leftTitle_h);
    var leftTitle_px = 0, leftTitle_py = 0, leftTitle_dx = 1, leftTitle_dy = 0;
    var steep_x = 4, steep_y = 4;
    var turning_x = leftTitle_w - 40, turning_y = 40;
    function draw_leftTitle() {
        ctx_leftTitle.save();
        ctx_leftTitle.fillStyle = 'rgba(1,15,75,0.1)';
        ctx_leftTitle.moveTo(0, 0);
        ctx_leftTitle.lineTo(160, 0);
        ctx_leftTitle.lineTo(200, 40);
        ctx_leftTitle.lineTo(turning_x, 40);
        ctx_leftTitle.lineTo(leftTitle_w, 80);
        ctx_leftTitle.lineTo(leftTitle_w, leftTitle_h);
        ctx_leftTitle.lineTo(0, leftTitle_h);
        ctx_leftTitle.lineTo(0, 0);
        ctx_leftTitle.fill();
        ctx_leftTitle.restore();
        ctx_leftTitle.save();
        ctx_leftTitle.fillStyle = 'rgba(255,215,0,1)';
        ctx_leftTitle.fillRect(leftTitle_px, leftTitle_py, 4, 4);
        ctx_leftTitle.restore();
        if (leftTitle_dx * leftTitle_dy != 0) {
            leftTitle_px += leftTitle_dx * 2;
            leftTitle_py += leftTitle_dy * 2;
        } else {
            leftTitle_px += leftTitle_dx * steep_x;
            leftTitle_py += leftTitle_dy * steep_y;
        }

        if (leftTitle_px >= 156 && leftTitle_py == 0 && leftTitle_px <=196) {
            leftTitle_px = 156;
            leftTitle_dx = 1;
            leftTitle_dy = 1;
        }
        if (leftTitle_px >=196 && leftTitle_py <=80 && leftTitle_px <=turning_x-4) {
            leftTitle_py = 40;
            leftTitle_dx = 1;
            leftTitle_dy = 0;
        }
        if (leftTitle_px > turning_x-4 && leftTitle_py ==40 && leftTitle_px <leftTitle_w-4) {
            leftTitle_px = turning_x-4;
            leftTitle_dx = 1;
            leftTitle_dy = 1;
        }

        if (leftTitle_px >= leftTitle_w - 4 && leftTitle_py <= leftTitle_h - 4) {
            leftTitle_px = leftTitle_w - 4;
            leftTitle_dx = 0;
            leftTitle_dy = 1;
        }
        if (leftTitle_px == leftTitle_w - 4 && leftTitle_py >= leftTitle_h) {
            leftTitle_py = leftTitle_h - 4;
            leftTitle_dx = -1;
            leftTitle_dy = 0;
        }
        if (leftTitle_py == leftTitle_h - 4 && leftTitle_px <= 0) {
            leftTitle_px = 0;
            leftTitle_dx = 0;
            leftTitle_dy = -1;
        }
        if (leftTitle_py <= 0 && leftTitle_px == 0) {
            leftTitle_py = 0;
            leftTitle_dx = 1;
            leftTitle_dy = 0;
        }
        requestAnimationFrame(draw_leftTitle);
    };
    draw_leftTitle()
}